<template>
  <div class="gyfb-wrap">
    <dx-Wrap :name="'重点人员预警数'">
      <template v-slot:content>
        <div class="wrap">
          <div class="aaa">
            <div class="name">
              <span><img :src="require('@/assets/img/bg/jinqian-yuan.png')" alt=""></span>
              资金10万以上</div>
            <div class="num">{{money}}</div>
          </div>
          <div class="aaa">
            <div class="name">
              <span><img :src="require('@/assets/img/bg/grandpa.png')" alt=""></span>
              55岁以上老人</div>
            <div class="num">{{age}}</div>
          </div>

        </div>
      </template>
    </dx-Wrap>
  </div>
</template>
<script>
    import commonDialog from '@/components/commonDialog/common.dialog'
    import commonForm from '@/components/commonForm/commonForm.component'
    import commonWrap from '@/components/customComponents/commonWrap.component'
    import tsCol from '@/components/left/tsCol'
    import dxWrap from '@/components/customComponents/dxWrap.component'
    import api from "@/api/common.api";
    import API from "@/api/index.api";
    export default {
        components: {
            // commonDialog,
            // commonForm,
            // commonWrap,
            dxWrap,
        },
        data () {
            return {
              echartsData: [],
              money:0,
              age:0,
            }
        },
        methods: {
          getVIP_num () {
            API.VIP_num().then(res=>{
              for (var i in res.content) {

                if(res.content[i].data_name==="资金10万以上"){

                  this.money=res.content[i].data_num
                }
                if(res.content[i].data_name==="55岁以上老人"){

                  this.age=res.content[i].data_num
                }
              }
            })
          },


        },
        mounted() {
          this.getVIP_num ()
        }
    }
</script>
<style lang="stylus">
  .gyfb-wrap{
    height: 100%;
      .wrap{
          padding: 20px;font-size: 60px;
      }
    .aaa{
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-image: url("../../assets/img/bg/zdry.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding: 10px;
      margin-bottom: 10px;
      color: #00e5ed;
      cursor: pointer;
      .name {
        display: flex;
        align-items: center;
        img {
            margin-right: 5px;
        }
      }
      .num {
        font-weight: bold;
      }
    }
  }
  @media screen and (max-width: 1920px) {
      .wrap{
          padding: 10px!important;
          font-size: 16px!important;
      }
  }
</style>
